<template>
  <div class="area-list-container">
    <div
      v-for="(item, index) in area.slice(0,2)"
      :key="index"
      class="area-item"
    >
      <span>{{ item.regionName }}</span>
      <span v-if="index<area.length-1">，</span>
    </div>
    <template v-if="area&&area.length>2">
      <el-popover
        placement="top"
        width="400px"
        trigger="hover"
      >
        <template #reference>
          <el-button type="text">更多</el-button>
        </template>
        <div>
          <span
            v-for="(item, index) in area"
            :key="index"
          >
            {{ item.regionName }}
            <i v-if="index<area.length-1">，</i>
          </span>
        </div>
      </el-popover>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    area: {
      type: Array,
      default: () => {},
    },
  },
  setup(props, context) {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.area-list-container {
  display: flex;
  align-items: center;
  .area-item {
    flex-shrink: 0;
  }
}
</style>
